<script setup>
import { ref, onMounted, watch } from 'vue'
import { useNewTalkServe, useQuarryHistoryServe, useQuarryHistoryDetailServe } from '@/api/ai.js'
import dayjs from 'dayjs'
// 引入ai store控制组件的显示
import { useAIStore } from '@/stores/modules/ai.js'
const aiStore = useAIStore()

// chatBox组件更新事件
const emit = defineEmits(['refresh'])

// 处理点击事件，查看历史记录
const quarryHistory = async (talkID) => {
  if (aiStore.talkID !== talkID) {
    const res = await useQuarryHistoryDetailServe(talkID)
    if (res.code === 200) {
      // 关闭ChatBanner
      aiStore.setAIChatBoxSwitch(false)
      // 存储当前talkID
      aiStore.setTalkID(talkID)
      // 存储当前对话记录
      aiStore.setTalkList(res.data)
      emit('refresh')
    }
  }
}

// 处理点击事件，新建对话
const newTalk = async () => {
  aiStore.setAIChatBoxSwitch(true)
  aiStore.setTalkID('')
  aiStore.setTalkList([])
}

// 对话记录
let talkList = ref([])

// 装填数据
const reloadData = async () => {
  const res = await useQuarryHistoryServe()
  if (res.code === 200) {
    talkList.value = res.data
      .filter((item) => item.content)
      .map((item) => ({
        talkID: item.talkID,
        content: item.content,
        time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss'),
      }))
    aiStore.setHistoryTalkList(talkList.value)
  }
}

// 使用 defineProps 返回的对象
const props = defineProps({
  refreshKey: {
    type: Boolean,
    default: false,
  },
})

// 监听 refreshKey 的变化
watch(
  () => props.refreshKey,
  async (newVal) => {
    if (newVal) {
      await reloadData()
    }
  },
)

onMounted(async () => {
  await reloadData()
})
</script>

<template>
  <div class="t-history">
    <div class="t-h-title">对话记录</div>
    <div class="t-h-body">
      <a class="t-h-b-item" v-for="item in talkList" @click="quarryHistory(item.talkID)">
        <div class="t-h-b-i-text">{{ item.content }}</div>
      </a>
    </div>
    <div class="t-h-footer">
      <a @click="newTalk()">新建对话</a>
    </div>
  </div>
</template>

<style scoped lang="scss">
.t-history {
  .t-h-body {
    height: calc(100% - 120px);
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    .t-h-b-item {
      margin: 5px auto;
      width: 88%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      color: #9b9b9c;
      .t-h-b-i-text {
        margin: 0 auto;
        letter-spacing: 1px;
        font-size: 15px;
        width: 82%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
    }
    .active {
      background-color: #f1f0fd;
      color: #a2a0ff;
    }
    .t-h-b-item:hover {
      background-color: #f1f0fd;
      color: #a2a0ff;
    }
  }
  .t-h-title {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #636363;
    border-bottom: #dddddd 1px solid;
    background-color: white;
  }
  .t-h-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border-top: #dddddd 1px solid;
    background-color: white;
    a {
      letter-spacing: 2px;
      font-size: 18px;
      font-weight: 400;
      background: linear-gradient(90deg, rgba(136, 15, 184, 1) 0%, rgba(51, 108, 242, 1) 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  position: fixed;
  left: 6vw;
  top: 5%;
  width: 280px;
  height: 65%;
  min-height: 620px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 5px 15px rgba(201, 201, 201, 0.2);
  overflow: hidden;
  z-index: 10;
}
</style>
